import React from "react";
import { useState } from "react";
import logo from "../logo.svg";
import "./style/header.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function Header() {
  const [isVisible, setIsVisible] = useState(false);
  const handleClick = () => {
    setIsVisible(!isVisible);
    console.log(isVisible);
  };
  const handleLeave = () => {
    setIsVisible(false);
  };

  const menus = [
    { icon: "gear", value: "Settings" },
    { icon: "gear", value: "View Profile" },
    { icon: "gear", value: "Get Help" },
    { icon: "gear", value: "Logout" },
  ];

  return (
    <header
      className="flex items-center shadow-sm shadow-gray-400 px-4 bg-white"
      style={{ height: "3.125rem" }}
    >
      <div className="flex flex-row flex-1 items-center">
        <img src={logo} className="w-8 h-8" />
        <a href="#" className="font-mono font-bold">
          WakaTime
        </a>
      </div>
      <div className="flex items-center">
        <button className="border border-gray-400 rounded p-1 text-xs text-blue-400">
          Upgrade
        </button>
        <button className="border border-black px-3 py-2 text-xs font-extrabold text-gray-600 rounded-lg ml-6 mr-3">
          Dashboard
        </button>
      </div>
      <button
        type="button"
        onClick={() => handleClick()}
        onBlur={() => handleLeave()}
        className="relative h-full"
        style={isVisible ? { backgroundColor: "#E7E7E7" } : {}}
      >
        <div className="flex items-center pl-3 pr-5">
          <img src={logo} className="w-6 h-6 m-1 rounded-full bg-gray-700" />
          <FontAwesomeIcon
            icon="fa-solid fa-caret-down"
            className="text-xs ml-1 text-gray-500"
          />
        </div>
      </button>
      <div>
        {isVisible ? (
          <div
            className="absolute right-4 bg-white shadow-lg rounded-b border border-gray-400"
            style={{ top: "3.125rem" }}
          >
            <ul className="menu-ul">
              {menus.map((menu) => (
                <li className="menu-li px-5 py-2" key={menu.value}>
                  <a href="#" className="flex items-center pr-1">
                    <FontAwesomeIcon
                      icon={["fa-solid", `fa-${menu.icon}`].join(" ")}
                      className="text-sm text-gray-500 mx-2"
                    />
                    <div className="pl-1 text-gray-900 text-sm">
                      {menu.value}
                    </div>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ) : null}
      </div>
    </header>
  );
}

export default Header;
